<template>
  <div>
    <div style="width:729px;height: 118px ;margin-bottom: 60px">
      <p style=" font-size: 18px;
  color: #333333;">剧情简介</p>
      <span>{{ i.content }}</span>
    </div>

    <div style="width: 729px; height: 303px;">
      <div style="margin-bottom: 10px">
        <span style=" font-size: 18px;
  color: #333333;">演职人员</span>
        <span>
           <a class="intro_a" href="javascript:void (0)" @click="job">全部></a>
        </span>
        </div>
      <!--      演职人员-->
      <div style="width: 729px; height: 263px;">
        <el-row :gutter="20">
          <el-col :span="6">
            <div style="width: 127px;height: 243px;">
              <div style="width: 127px; height: 20px;margin-bottom: 10px">
                <span >导演</span>
              </div>
              <img :src="i.jobiImg">
              <div style="width: 127px; height: 20px;margin-top: 10PX;text-align: center">
                <span>斯科特·沃</span>
              </div>
            </div>
          </el-col>
          <!--            演职人员:演员-->
          <el-col :span="18">

            <div style="width: 571px; height: 20px;margin-bottom: 10px">
              <span >演员</span>
            </div>

            <el-row >
              <el-col :span="8" v-for="item in jobArr">
                <img :src="item.actorImg" >
                <div style="width: 127px; height: 20px;margin-top: 10PX;text-align: center">
                  <span>{{ item.actor }}</span>
                </div>
                <div style="width: 127px; height: 16px;margin-top: 10PX;text-align: center">
                <span > 饰：{{ item.cos }}</span>
                </div>
              </el-col>

            </el-row>
          </el-col>
        </el-row>
      </div>
<!--      演员就结束-->
      <!--图集-->
      <div style="width: 729px;height:298px;margin-top: 80px;margin-bottom: 60px">

        <div style="width: 729px;height: 20px;">
          <span style=" font-size: 18px;
                color: #333333;"> 图集</span>
          <span style="">
            <a class="intro_a"href="javascript:void (0)"@click="atlas"> 全部> </a>
          </span>
        </div>

        <div style="width:729px;height: 258px;margin-top:10px" >
          <el-row :gutter="70">
           <el-col :span="14"><img :src="a[0].img"></el-col>
           <el-col :span="10" >
            <span class="im_sp"><img :src="a[1].img" ></span>
            <span class="im_sp"><img :src="a[2].img" ></span>
            <span class="im_sp"><img :src="a[3].img" ></span>
            <span class="im_sp"><img :src="a[4].img" ></span>
           </el-col>
          </el-row>

        </div>

        <div style="width:730px;height:135px;margin-bottom: 60px;margin-top: 40px">
          <div style="width: 729px;height: 20px;">
          <span style=" font-size: 18px;
                color: #333333;"> 影片资料</span>
            <span style="">
            <a class="intro_a"href="javascript:void (0)"@click="prizes"> 全部> </a>
          </span>
          </div>
        <div style="width: 668px; width: 49px;">



        </div>

        </div>




        </div>
      </div>

    </div>


</template>

<script>
export default {
  name: "IntroduceView",
  data() {
    return {
      a:[{img:'/img/7.jpg '},{img:"/img/8.jpg"},{img:"/img/8.jpg"},
        {img:"/img/8.jpg"},{img:"/img/8.jpg"}],
      i: {
        content: "好莱坞经典动作IP敢死队系列第四部《敢死队4：最终章》，史泰龙携手杰森·斯坦森传奇硬汉震撼回归，再次聚焦一群资深雇佣兵的故事。讲述了敢死小队最后一次集结，登上外海一艘满载核弹的货轮，开展一场阻止巨轮核弹爆炸的惊天行动。",
        jobiImg: "/img/5.jpg"
      },
      jobArr:[{actorImg:"/img/6.jpg",actor:"杰森·斯坦森",cos:"圣诞"},
        {actorImg:"/img/6.jpg",actor:"杰森·斯坦森",cos:"圣诞"},
        {actorImg:"/img/6.jpg",actor:"杰森·斯坦森",cos:"圣诞"}]
    }

  }, methods: {
   job() {
      this.$router.push('/filmDetail/job')
    },
    atlas(){
     this.$router.push('/filmDetail/atlas')
    },
    prizes(){
     this.$router.push('/filmDetail/prizes')
    }
  },
  mounted() {
  }


}
</script>

<style scoped>
a{
  text-decoration: none;
}
.intro_a{
  color: #333333;
  float: right
}
.im_sp{
  margin-left: 5px;
}
</style>